<template>
	<view class="all-mine-box">
		
		<!--  顶部个人信息  -->
		<view class="top-bg-box">
			<image class="mine-bg" src="~/static/mine/bg.png"></image>
			
			<!--  用户登录的情况下  -->
			<view class="mine-info" v-if="userInfo">
				<view class="flex-box">
					<view class="set-box" @tap="navTo({'path':'/pages/setting/setting'})">
						<text class="iconfont iconshezhi"></text>
					</view>
					<view class="user-head">
						<image class="head-img" v-if="head" :src="head"></image>
					</view>
					<view class="set-box edit-box" @tap="navTo({'path':'/pages/setting/mine'})">
						<text class="iconfont iconbianji"></text>
					</view>
				</view>
				<view class="user-name">
					<text class="v">v</text>
					<text class="name">{{userInfo.nickName}}</text>
				</view>
				<view class="integral">
					我的积分： 588
					<text class="sign">签到</text>
				</view>
			</view>
			<!--  用户登录的情况下end  -->
			
			<!--  没有登录的情况  -->
			<view class="mine-info" v-else>
				<view class="flex-box">
					<view class="user-head">
					</view>
				</view>
				<view class="login-text">
					<text class="text" @tap="navLogin">
						[登录]
					</text>
				</view>
			</view>
			<!--  没有登录的情况end  -->
			
		</view>
		<!--  顶部个人信息end  -->
		
		<!--  订单区域  -->
		<view class="order-pos">
			<view class="order-info">
				<view class="order-title">
					<view class="title">我的订单</view>
					<view class="title-r">查看全部订单</view>
				</view>
				<view class="order-flex">
					<view class="order-item" v-for="(item,index) in orderTab" :key="index" @tap="navOrder(item)">
						<view class="icon-box">
							<text v-if="item.hasIden && item.iden>0" class="icon-num">{{item.iden}}</text>
							<image class="icon" :src="item.icon"></image>
						</view>
						<view class="icon-name">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--  订单区域end  -->
		
		<!--  功能列表  -->
		<view class="list-box">
			<view class="list-item" v-for="(item,index) in listTab" :key="index" @tap="navTo(item)">
				<view class="item-name">
					<text class="iconfont" :class="[item.icon]"></text>
					<text class="name">{{item.name}}</text>
				</view>
				<view class="item-icon">
					<text class="iconfont iconxiangyou1"></text>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import {hasLogin} from "../../utils/hasLogin.js"
	import {mapState} from "vuex"
	export default {
		name:"mine",
		data() {
			return {
				head:null,
				orderTab:[
					{id:0,name:"待付款",hasIden:false,iden:0,icon:"../../static/mine/daifu.png"},
					{id:1,name:"待发货",hasIden:false,iden:0,icon:"../../static/mine/daifa.png"},
					{id:2,name:"待收货",hasIden:true,iden:1,icon:"../../static/mine/daisou.png"},
					{id:3,name:"评价",hasIden:false,iden:0,icon:"../../static/mine/comit.png"},
					{id:4,name:"退款/售后",hasIden:false,iden:0,icon:"../../static/mine/tui.png"},
				],
				listTab:[
					{name:"我的收藏",icon:"iconshoucang-",path:"/pages/mine/collection"},
					{name:"我的足迹",icon:"iconzuji",path:"/pages/mine/footprint"},
					{name:"我的优惠券",icon:"iconyouhuiquan",path:"/pages/mine/discount"},
					{name:"联系客服",icon:"iconkefu",path:"/pages/mine/customer"},
				]
			}
		},
		computed:{
			...mapState("user",['userInfo'])
		},
		methods:{
			
			
			//  去订单详情 
			navOrder(item){
				console.log(item)
			},
			
			/*  去列表功能页面  */
			navTo(item){
				uni.navigateTo({
					url:item.path
				})
			},
			
			
			/*  去登录  */
			navLogin(){
				let has = location.hash
				let path = has.substring(1,has.length)
				path = '/pages/login/login?path=' + path
				uni.navigateTo({
					url:path
				})
			},
			
			/*   用户签到   */
			// getUserSign(){
			// 	this.$ajax("userSign",'').then((res)=>{
			// 		if(res.code>=0){
						
			// 		}
			// 	})
			// },
			
			/*  获取个人信息  */
			getUserInfo(){
				this.$ajax("queryUserInfo",{}).then((res)=>{
					if(res.code>=0){
						if(res.data !=null){
							this.head = res.data.photo
							let user = Object.assign(this.userInfo,res.data)
							this.$store.commit("user/setUserInfo",user)
							uni.setStorage({
							    key: 'userInfo',
							    data: user,
							});
						}
					}
				})
			}
			
		},
		onShow() {
			this.getUserInfo()
		},
		onLoad() {
			/* this.getUserSign() */
		}
	}
</script>

<style scoped lang="scss">
	$vSize:32rpx;
	page{
		background: #FFFFFF;
	}
	.all-mine-box{
		width: 100%;
		
		/*  顶部个人信息  */
		.top-bg-box{
			width: 100%;
			height: 428rpx;
			position: relative;
			.mine-bg{
				width: 100%;
				height: 428rpx;
			}
			.mine-info{
				width: 100%;
				position: absolute;
				left: 0;
				right: 0;
				top: 46rpx;
			}
			.flex-box{
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.user-head{
				width: 160rpx;
				height: 160rpx;
				background-color: #f2f2f2;
				border-radius: 94rpx 94rpx;
				.head-img{
					width: 160rpx;
					height: 160rpx;
					border-radius: 160rpx 160rpx;
				}
			}
			.iconfont{
				color: #FA436A;
				font-size: 40rpx;
				line-height: 60rpx;
			}
			.set-box{
				width: 60rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				border-radius: 60rpx 60rpx;
				background: #FFFFFF;
				margin: 0 40rpx;
			}
			.edit-box{
				margin-top: 30rpx;
				.iconfont{
					font-size: 32rpx;
				}
			}
			.user-name{
				padding-top: 30rpx;
				color: #FFFFFF;
				text-align: center;
				.name{
					font-size: 28rpx;
				}
				.v{
					display: inline-block;
					width: $vSize;
					height: $vSize;
					text-align: center;
					line-height: $vSize;
					border-radius: $vSize $vSize;
					color: #FA436A;
					line-height: $vSize;
					background: #FFFFFF;
					font-size: 20rpx;
					margin-right: 8rpx;
					vertical-align: text-bottom;
				}
			}
			.integral{
				color: #FFFFFF;
				font-size: 24rpx;
				text-align: center;
				padding-top: 14rpx;
				.sign{
					margin-left: 20rpx;
				}
			}
			.login-text{
				text-align: center;
				padding-top: 20rpx;
				.text{
					color: #FFFFFF;
					font-size: 32rpx;
				}
				
			}
		}
		/*  顶部个人信息  */
		
		
		/*  订单模块  */
		.order-pos{
			position: relative;
		}
		.order-info{
			position: absolute;
			width: calc(100% - 80rpx);
			left: 40rpx;
			top: -80rpx;
			z-index: 99;
			background-color: #FFFFFF;
			border-radius: 12rpx 12rpx;
			box-shadow: 0 0 30rpx rgba(0,0,0,0.2);
			.order-title{
				box-sizing: border-box;
				padding: 8rpx 16rpx 20rpx 16rpx;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				.title{
					color: #000000;
					font-size: 28rpx;
					line-height: 1.2;
				}
				.title-r{
					color: #757575;
					font-size: 22rpx;
					line-height: 1.2;
				}
			}
			.order-flex{
				width: 100%;
				padding: 20rpx 16rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				.order-item{
					text-align: center;
					.icon{
						width: 48rpx;
						height: 48rpx;
					}
					.icon-name{
						font-size: 24rpx;
						color: #3e3e3e;
					}
					.icon-box{
						position: relative;
					}
					.icon-num{
						position: absolute;
						right: 0;
						top: 0;
						background: #FA436A;
						color: #FFFFFF;
						width: 30rpx;
						height: 30rpx;
						line-height: 30rpx;
						text-align: center;
						font-size: 20rpx;
						display: inline-block;
						border-radius: 30rpx 30rpx;
						z-index: 9999;
						top: -10rpx;
					}
				}
			}
		}
		/*  订单模块end  */
		
		.list-box{
			width: calc(100% - 80rpx);
			margin-left: 40rpx;
			margin-top: 180rpx;
			.list-item{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 100rpx;
				.item-name{
					.iconfont{
						font-size: 40rpx;
						color: #3e3e3e;
					}
					.name{
						font-size: 28rpx;
						color: #3e3e3e;
						vertical-align: text-bottom;
						padding-left: 20rpx;
					}
				}
				.item-icon{
					.iconfont{
						color: #a0a0a0;
						font-size: 28rpx;
					}
				}
			}
		}
		
	}
</style>
